<!-- 教师班级页面 -->
<template>
  <div class="">
    <el-col :span="4">
      <div><bav :numbav="$route.query.isbav"></bav></div>
    </el-col>

    <el-col :span="19" :offset="1">
      <div style="">
        <el-card shadow="never">
          <el-button
            class="el-icon-plus"
            type="primary"
            round
            @click="dialogVisible = true"
            >&nbsp添加班级</el-button
          >
          <p class="tag">班级列表</p>

          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="" width="180">
            </el-table-column>
            <el-table-column prop="stuNum" label="" width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="" width="180">
            </el-table-column>
            <el-table-column label="">
              <template slot-scope="scope">
                <el-button
                  @click="manageStu(scope.row)"
                  type="text"
                  size="small"
                  >学生管理</el-button
                >
                <el-button
                  @click="clickUpdateName(scope.row)"
                  type="text"
                  size="small"
                  >重命名</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="deleteClass(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-col>
    <div>
      <el-dialog
        :close-on-click-modal="false"
        title="创建班级"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form
          :model="classForm"
          ref="classForm"
          label-width="100px"
          class="demo-dynamic"
          @submit.native.prevent
        >
          <el-form-item
            prop="className"
            label="班级名"
            :rules="[
              { required: true, message: '班级名必填', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="classForm.className"
              placeholder="建议创建容易区分的班级名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"  @click="createClass(classForm)"
              >确 定</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <div>
      <el-dialog
        :close-on-click-modal="false"
        title="重命名"
        :visible.sync="isupdate"
        width="30%"
      >
        <el-form
          :model="classForm"
          ref="classForm"
          label-width="100px"
          class="demo-dynamic"
          @submit.native.prevent
        >
          <el-form-item
            prop="className"
            label="新班级名"
            :rules="[
              { required: true, message: '班级名必填', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="classForm.className"
              placeholder="建议创建容易区分的班级名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="isupdate = false">取 消</el-button>
            <el-button type="primary" @click="updateName(classForm)" 
              >确 定</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Bav from "../bav.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Bav },
  data() {
    //这里存放数据
    return {
      isupdate: false,
      addClassName: "",
      dialogVisible: false,
      tableData: [
        // {
        //   classId: "fdfe",
        //   className: "2018软件56班",
        //   classCount: 4,
        // },
      ],
      classForm: {
        className: "",
        id:"",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getKcbj() {
      this.$http({
        url: this.$http.adornUrl(
          `/edu-kcbj/kcbj/${this.$route.query.courseid}`
        ),
        methods: "get",
        params: this.$http.adornParams(),
      }).then((data) => {
        if (data && data.data.code === 20000) {
          this.tableData = data.data.data.data;
          //更新页面
        } else {
          // this.$refs.slideblock.reset();
          this.$message.error("未能成功获取数据！");
        }
      });
    },
    //点击重命名
    clickUpdateName(row) {
        this.classForm.className = row.name;
        this.classForm.id = row.id;
        this.isupdate = true;
    },
    //重命名
    updateName(classForm){
      if (this.classForm.className != null && this.classForm.className != "") {
        this.$http({
          url: this.$http.adornUrl(
            `/edu-kcbj/kcbj/update`
          ),
          method: "post",
          data: this.$http.adornData(
            {
              id: this.classForm.id,
              name: this.classForm.className,
            },
            false
          ),
        }).then(({ data }) => {
          if (data && data.code === 20000) {
            this.classForm.className = "";
            this.$message({
              message: "修改班级名成功",
              type: "success",
            });
            this.getKcbj();
          } else {
            // this.$refs.slideblock.reset();
            this.$message.error("未能成功班级名！");
          }
        });
        this.isupdate = false;
      } else {
        alert("班级名未填！");
      }
    },
    createClass(classForm) {
      if (this.classForm.className != null && this.classForm.className != "") {
        this.$http({
          url: this.$http.adornUrl(
            `/edu-kcbj/kcbj/${this.$store.state.user.id}/${this.$route.query.courseid}`
          ),
          method: "post",
          data: this.$http.adornData(
            {
              name: this.classForm.className,
            },
            false
          ),
        }).then(({ data }) => {
          if (data && data.code === 20000) {
            this.classForm.className = "";
            this.$message({
              message: "添加班级成功",
              type: "success",
            });
            this.getKcbj();
          } else {
            // this.$refs.slideblock.reset();
            this.$message.error("未能成功创建按班级！");
          }
        });
        this.dialogVisible = false;
      } else {
        alert("班级名未填！");
      }
    },

    //管理班级学生
    manageStu(row) {
      this.$router.push({
        name: "studentmanage",
        query: {
          courseid: this.$route.query.courseid,
          courseName: this.$route.query.courseName,
          classid: row.id,
        },
      });
    },
    //删除班级
    deleteClass(row) {
      this.$confirm("此操作将永久删除该班级, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/edu-kcbj/kcbj/${row.id}`), //http://localhost:8082/eduservice/edu-teacher/teacher/20205532
            method: "delete",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 20000) {
              this.$message({
                message: "删除课程成功",
                type: "success",
              });
              this.getKcbj();
            } else {
              this.$message.error("未能成功删除该课程");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.$route.query.courseid == null) {
      this.$router.replace({ name: 404 });
    }
    this.getKcbj();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.tag {
  color: #909399;
  padding: 0 10px;
  font-size: 15px;
  white-space: nowrap;
}

tr .el-table__row {
  height: 200px;
}
</style>
